<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>salvo</title>
  </head>
  {% include "user_list.html" %}
  <script src="assets/js/tailwindcss.js"></script>
  <script src="assets/js/sweetalert2.js"></script>
  <script src="assets/js/alpinejs.js" defer></script>
  <script>
    function userForm() {
      return {
        users: [],
        fetchData() {
          fetch("/api/users")
            .then((response) => {
              if (!response.ok) {
                throw new Error("Network response was not ok");
              }
              return response.json();
            })
            .then((data) => {
              this.users = data.data;
            })
            .catch((error) => {
              console.error(
                "There has been a problem with your fetch operation:",
                error
              );
            });
        },
        addUser() {
          Swal.fire({
            title: "{{add_user}}",
            showCancelButton: true,
            confirmButtonText: "{{yes}}",
            cancelButtonText: "{{cancel}}",
            html: `
    <input id="swal-input1" class="swal2-input" placeholder="{{username}}">
    <input id="swal-input2" class="swal2-input" placeholder="{{password}}">
    `,
            preConfirm: () => {
              return fetch("/api/users", {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({
                  username: document.getElementById("swal-input1").value,
                  password: document.getElementById("swal-input2").value,
                }),
              })
                .then((response) => {
                  if (!response.ok) {
                    throw new Error(response.statusText);
                  }
                  this.fetchData();
                  return;
                })
                .catch((error) => {
                  Swal.showValidationMessage(`Request failed: ${error}`);
                });
            },
            allowOutsideClick: () => !Swal.isLoading(),
          });
        },
        deleteUser(id) {
          Swal.fire({
            title: "{{are_you_sure_you_want_to_delete}}",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "{{yes}}",
            cancelButtonText: "{{cancel}}",
            preConfirm: () => {
              return fetch(`/api/users/${id}`, {
                method: "DELETE",
              })
                .then((response) => {
                  if (!response.ok) {
                    throw new Error(response.statusText);
                  }
                  this.fetchData();
                  return;
                })
                .catch((error) => {
                  Swal.showValidationMessage(`Request failed: ${error}`);
                });
            },
            allowOutsideClick: () => !Swal.isLoading(),
          }).then((result) => {});
        },
      };
    }
  </script>
</html>
